<template>
    <div class="elesign">
        <!-- pdf的预览 -->
        <pdf-preview
          ref="preview"
          :pdfUrl="url"
          @renderPdf="renderPdf"
        ></pdf-preview>
    
        <!-- 盖章部分 -->
        <canvas id="ele-canvas"></canvas>
        <section class="ele-control">
          <el-button
            size="small"
            icon="el-icon-plus"
            @click="addSignature"
            :disabled="hasSigna"
            >添加签章</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            @click="removeSignature"
            :disabled="!hasSigna"
            >删除签章</el-button
          >
          <el-button size="small" @click="getSignature" :disabled="!hasSigna"
            >获取数据</el-button
          >
        </section>
        <!-- <img src="../assets/logo.png" id="img" style="display:none" /> -->
      </div>


</template>
<script>

import { fabric } from "fabric";
import pdfPreview from "./pdfPreview";
let goodtop, goodleft, boundingObject;

export default {
  name: "PdfDemo",
  components: {
    pdfPreview,
  },
  data() {
    return {
      url: `http://${window.location.host}/static/doc/hello.pdf`,
      canvas: null,
      whDatas: null,
      signaData: {},
    };
  },
  computed: {
    hasSigna() {
      return !!this.canvas && !!this.canvas.getObjects()[0] ? true : false;
    },
  },
  watch: {
    whDatas: {
      handler() {
        if (!!this.whDatas) {
          this.renderFabric();
          this.canvasEvents();
        }
      },
    },
  },
  methods: {
    // 设置绘图区域宽高
    renderPdf(data) {
      this.whDatas = data;
      document.querySelector(".elesign").style.width = data.width + "px";
    },

    // 生成绘图区域
    renderFabric() {
      let canvaEle = document.querySelector("#ele-canvas");
      canvaEle.width = this.whDatas.width;
      canvaEle.height = this.whDatas.height;

      this.canvas = new fabric.Canvas(canvaEle);
      let container = document.querySelector(".canvas-container");
      container.style.position = "absolute";
      container.style.top = "42px";
      // console.log(this.canvas);
    },

    // 相关事件操作哟
    canvasEvents() {
      // 拖拽边界 不能将图片拖拽到绘图区域外
      this.canvas.observe("object:moving", function (e) {
        var obj = e.target;

        if (obj.height > obj.canvas.height || obj.width > obj.canvas.width) {
          obj.setScaleY(obj.originalState.scaleY);
          obj.setScaleX(obj.originalState.scaleX);
        }
        obj.setCoords();
        if (
          obj.getBoundingRect().top - obj.cornerSize / 2 < 0 ||
          obj.getBoundingRect().left - obj.cornerSize / 2 < 0
        ) {
          obj.top = Math.max(
            obj.top,
            obj.top - obj.getBoundingRect().top + obj.cornerSize / 2
          );
          obj.left = Math.max(
            obj.left,
            obj.left - obj.getBoundingRect().left + obj.cornerSize / 2
          );
        }
        if (
          obj.getBoundingRect().top +
            obj.getBoundingRect().height +
            obj.cornerSize >
            obj.canvas.height ||
          obj.getBoundingRect().left +
            obj.getBoundingRect().width +
            obj.cornerSize >
            obj.canvas.width
        ) {
          obj.top = Math.min(
            obj.top,
            obj.canvas.height -
              obj.getBoundingRect().height +
              obj.top -
              obj.getBoundingRect().top -
              obj.cornerSize / 2
          );
          obj.left = Math.min(
            obj.left,
            obj.canvas.width -
              obj.getBoundingRect().width +
              obj.left -
              obj.getBoundingRect().left -
              obj.cornerSize / 2
          );
        }
      });
    },

    // 添加签章
    addSignature() {
      fabric.Image.fromURL(
        `http://${window.location.host}/static/imgs/dog3.png`,
        (oImg) => {
          oImg.set({
            left: this.whDatas.width / 2 - 50,
            top: this.whDatas.height / 2 - 100,
            width: 400,
            height: 400,
            angle: 10,
            scaleX: 0.6,
            scaleY: 0.6,
          });
          oImg.scale(0.5); //图片缩小一半
          this.canvas.add(oImg);
        }
      );

      // let imgElement = document.getElementById("img"); //声明我们的图片
      // let imgInstance = new fabric.Image(imgElement, {
      //   //设置图片位置和样子
      //   left: 100,
      //   top: 100,
      //   width: 200,
      //   height: 200,
      //   angle: 30, //设置图形顺时针旋转角度
      // });
      // this.canvas.add(imgInstance);
    },

    // 删除签章
    removeSignature() {
      this.canvas.remove(this.canvas.getObjects()[0]);
    },

    // 生成传给后端的数据
    getSignature() {
      let data = this.canvas.getObjects()[0];
      // console.log(data);
      this.signaData = {
        width: data.width,
        height: data.height,
        top: data.top,
        left: data.left,
        angle: data.angle,
        translateX: data.translateX,
        translateY: data.translateY,
        scaleX: data.scaleX,
        scaleY: data.scaleY,
        pageNum: this.$refs.preview.pageNum,
      };
      console.log(this.signaData);
    },
  },
};



</script>
<style>
    .elesign {
  position: relative;
  margin: 0 auto;
  .canvas-container {
    position: absolute;
    top: 42px;
    left: 0;
  }
}
#ele-canvas {
  border: 1px solid #5ea6ef;
}


</style>